<template>
  <div class="container">
    <nav class="user-action-nav" v-if="this.$store.state.loginState">
      <ul class="nav-list left">
        <div class="avater"></div>
        <li class="nav-item">
          <a href="#">
            <i class="iconfont">&#xe638;</i>
            <span>发动态</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#">
            <i class="iconfont">&#xe601;</i>
            <span>写文章</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#">
            <i class="iconfont">&#xe602;</i>
            <span>分享链接</span>
          </a>
        </li>
      </ul>
      <ul class="nav-list right">
        <li class="nav-item">
          <a href="#">
            <i class="iconfont"></i>
            <span>草稿</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="timeline-entry-list">
      <header class="list-header">
        <nav class="list-nav">
          <ul class="nav-list left">
            <li class="nav-item active">
              <a href="#">
                热门
              </a>
            </li>
            <li class="nav-item">
              <a href="#">
                最新
              </a>
            </li>
            <li class="nav-item">
              <a href="#">
                评论
              </a>
            </li>
          </ul>
          <ul class="nav-list right">
            <li class="nav-item">
              <a href="#">
                本周热门
              </a>
            </li>
            <li class="nav-item">
              <a href="#">
                本月热门
              </a>
            </li>
            <li class="nav-item">
              <a href="#">
                历史热门
              </a>
            </li>
          </ul>
        </nav>
      </header>
    </div>
    <index-aside></index-aside>
  </div>
</template>

<script>
import IndexAside from './aside/Aside.vue'
import userFloatbox from '@/components/userfloatbox/userFloatbox'
export default {
  name: 'HomeContainer',
  components: {
    IndexAside,
    userFloatbox
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
  .container
    max-width 19.2rem
    margin .44rem auto 0
    position relative
    .user-action-nav,.timeline-entry-list
      background $theme-background
      margin-right 5.2rem
      border-radius .04rem
      box-shadow 0 1px 2px 0 rgba(0,0,0,.05)
    .user-action-nav
      display flex
      justify-content space-between
      .nav-list
        display flex
        align-items center
        .avater
          width 1rem
          height 1rem
          background #eee
          background-image url('https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKY699wKpk7qh7kaZBEQd30oc24Y5GnsuIX1ExhyBpeG1r4qhbgCojmQE7yGg8nD0GUsKq7s8q0yg/132')
          background-size cover
        .nav-item
          padding 0 .36rem
          position relative
        .nav-item>a:after
          position absolute
          top 0
          left 0
          bottom 0
          right 0
          content ''
        .nav-item>a
          color $theme-color
          cursor not-allowed //功能未实现临时图标
      .nav-list.right a
        color $theme-3-color
      .nav-list.right a:hover
        color $theme-color
    .timeline-entry-list
      margin-top .32rem
      .list-header
        padding .32rem .24rem
        border-bottom .02rem solid rgba(150,150,150,.1)
        .list-nav
          display flex
          justify-content space-between
          .nav-list
            position relative
            display flex
            align-items center
            .nav-item
              position relative
            .nav-item>a
              color $theme-2-color
              cursor not-allowed //功能未实现临时图标
            .nav-item a:hover,.nav-item.active a
              color $theme-color
            .nav-item>a:after
              position absolute
              top 0
              left 0
              bottom 0
              right 0
              content ''
          .nav-list.left
            .nav-item
              padding 0 .3rem
              border-right .02rem solid rgba(150,150,150,.1)
            .nav-item:last-child
              border none
          .nav-list.right
            .nav-item
              padding 0 .18rem
            .nav-item:after
              width .04rem
              height 0.04rem
              border-radius 50%
              background $theme-2-color
              content ''
              position absolute
              left 100%
              top 50%
            .nav-item:last-child:after
              display none

@media only screen and (max-width: 700px)
  .container .user-action-nav, .container .timeline-entry-list
    margin-right 0

@media only screen and (max-width: 600px)
  .container
    .user-action-nav
      display none
    .timeline-entry-list
      .list-header .list-nav .nav-list.right
        display none
      .entry-list .item .content-box
        .content-title
          font-size .28rem
        .action-list .action-item.share,.action-list .action-item.collect
          visibility visible

</style>
